<template>
  <div class="login-container">
    <!-- 左侧内容区域 -->
    <div class="login-left">
      <div class="rounded-l-full"></div>

      <div class="left-content">
        <h1 class="system-title">环保执法处罚一体化平台</h1>
        <div class="system-illustration">
          <div class="dashboard-mockup">
            <div class="mark"></div>
            <img src="@/assets/images/login.png" alt="图片加载失败" />
          </div>
        </div>
        <p class="system-description">高效管理环保执法流程，实现研判驱动全程电子化，提升执法效率与透明度</p>
      </div>
    </div>

    <!-- 右侧登录表单 -->
    <div class="login-right">
      <div class="login-form-container">
        <h2 class="login-title">欢迎登录</h2>

        <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              type="text"
              size="large"
              auto-complete="off"
              placeholder="请输入用户名">
              <template #prefix><svg-icon icon-class="user" class="input-icon" /></template>
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              size="large"
              auto-complete="off"
              placeholder="请输入密码"
              show-password
              @keyup.enter="handleLogin">
              <template #prefix><svg-icon icon-class="password" class="input-icon" /></template>
            </el-input>
          </el-form-item>

          <el-form-item prop="code" v-if="captchaEnabled" class="captcha-item">
            <el-input
              v-model="loginForm.code"
              size="large"
              auto-complete="off"
              placeholder="请输入验证码"
              @keyup.enter="handleLogin">
              <template #prefix><svg-icon icon-class="validCode" class="input-icon" /></template>
            </el-input>
            <div class="captcha-image">
              <img :src="codeUrl" @click="getCode" class="captcha-img" title="点击刷新验证码" />
            </div>
          </el-form-item>

          <el-form-item>
            <el-button :loading="loading" size="large" type="primary" class="login-btn" @click.prevent="handleLogin">
              <span v-if="!loading">登录</span>
              <span v-else>登录中...</span>
            </el-button>
          </el-form-item>
        </el-form>
        <!-- 底部版权信息 -->
        <div class="copyright">© 2025 环保执法处罚一体化平台. 保留所有权利</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCodeImg } from '@/api/login'
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'
import useUserStore from '@/store/modules/user'

const title = import.meta.env.VITE_APP_TITLE
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()

const loginForm = ref({
  username: 'admin',
  password: 'admin123',
  rememberMe: false,
  code: '',
  uuid: '',
})

const loginRules = {
  username: [{ required: true, trigger: ['blur', 'change'], message: '请输入您的账号' }],
  password: [{ required: true, trigger: ['blur', 'change'], message: '请输入您的密码' }],
  code: [{ required: true, trigger: 'change', message: '请输入验证码' }],
}

const codeUrl = ref('')
const loading = ref(false)
// 验证码开关
const captchaEnabled = ref(true)
// 注册开关
const register = ref(false)
const redirect = ref(undefined)

watch(
  route,
  newRoute => {
    redirect.value = newRoute.query && newRoute.query.redirect
  },
  { immediate: true }
)

function handleLogin() {
  proxy.$refs.loginRef.validate(valid => {
    if (valid) {
      loading.value = true
      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
      if (loginForm.value.rememberMe) {
        Cookies.set('username', loginForm.value.username, { expires: 30 })
        Cookies.set('password', encrypt(loginForm.value.password), { expires: 30 })
        Cookies.set('rememberMe', loginForm.value.rememberMe, { expires: 30 })
      } else {
        // 否则移除
        Cookies.remove('username')
        Cookies.remove('password')
        Cookies.remove('rememberMe')
      }
      // 调用action的登录方法
      userStore
        .login(loginForm.value)
        .then(() => {
          const query = route.query
          const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
            if (cur !== 'redirect') {
              acc[cur] = query[cur]
            }
            return acc
          }, {})
          router.push({ path: redirect.value || '/', query: otherQueryParams })
        })
        .catch(() => {
          loading.value = false
          // 重新获取验证码
          if (captchaEnabled.value) {
            getCode()
          }
        })
    }
  })
}

function getCode() {
  getCodeImg().then(res => {
    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
    if (captchaEnabled.value) {
      codeUrl.value = 'data:image/gif;base64,' + res.img
      loginForm.value.uuid = res.uuid
    }
  })
}

function getCookie() {
  const username = Cookies.get('username')
  const password = Cookies.get('password')
  const rememberMe = Cookies.get('rememberMe')
  loginForm.value = {
    username: username === undefined ? loginForm.value.username : username,
    password: password === undefined ? loginForm.value.password : decrypt(password),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
  }
}

getCode()
getCookie()
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  flex-wrap: wrap;
}

// 左侧内容区域
.login-left {
  width: 50%;
  background: rgb(30 58 138 / var(--tw-bg-opacity, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  .left-content {
    text-align: center;
    color: white;
    max-width: 37.5rem;
    padding: 0 2.5rem;
  }

  .rounded-l-full {
    position: absolute;
    right: -6%;
    width: 16rem;
    height: 100%;
    background: rgb(30 64 175 / var(--tw-bg-opacity, 1));
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
  }

  .system-title {
    font-size: 2.5rem;
    line-height: 2.5rem;
    font-weight: 700;
    margin-bottom: 3.75rem;
    letter-spacing: 0.125rem;
  }

  .system-illustration {
    margin: 3.75rem 0;
  }

  .dashboard-mockup {
    width: 100%;
    backdrop-filter: blur(0.625rem);
    margin: 0 auto;
    transition: all 0.3s ease;
    &:hover {
      transform: scale(1.02);
      transition: all 0.3s ease;
    }
    .mark {
      width: 100%;
      height: 100%;
      background-color: rgb(30 64 175 / 0.3);
      position: absolute;
      left: 0;
      top: 0;
    }
    img {
      width: 100%;
      border-radius: 0.75rem;
    }
  }

  .system-description {
    font-size: 1.125rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-top: 2.5rem;
    color: rgb(219 234 254 / var(--tw-text-opacity, 1));
  }
}

// 右侧登录表单
.login-right {
  position: relative;
  width: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -0.3125rem 0 1.25rem rgba(0, 0, 0, 0.1);
}

.login-form-container {
  width: 55%;
  padding: 0 2.5rem;
}

.login-title {
  font-size: 1.875rem;
  line-height: 2.25rem;
  color: #303133;
  text-align: left;
  margin-bottom: 3.75rem;
  font-weight: 700;
}

.login-form {
  .el-form-item {
    margin-bottom: 2.4rem;

    .el-input {
      height: 3rem;

      :deep(.el-input__wrapper) {
        border-radius: 0.5rem;
      }

      input {
        height: 3rem;
        border: 0.0625rem solid #e4e7ed;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        padding-left: 2.8125rem;
        transition: all 0.3s ease;

        &:focus {
          border-color: #409eff;
          box-shadow: 0 0 0 0.125rem rgba(64, 158, 255, 0.1);
        }

        &::placeholder {
          color: #c0c4cc;
        }
      }
    }

    .input-icon {
      color: #c0c4cc;
      font-size: 1rem;
    }
  }

  .captcha-item {
    .el-input {
      width: calc(100% - 8.5625rem);
    }

    .captcha-image {
      display: flex;
      align-items: center;
      width: 7.9375rem;
      height: 3rem;
      float: right;
      text-align: center;
      margin-left: 0.625rem;

      .captcha-img {
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
        cursor: pointer;
        border: 0.0625rem solid #e4e7ed;
        transition: all 0.3s ease;

        &:hover {
          border-color: #409eff;
        }
      }
    }
  }

  .login-btn {
    width: 100%;
    height: 3rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-0.125rem);
      box-shadow: 0 0.5rem 1.5625rem rgba(102, 126, 234, 0.3);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

.copyright {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #909399;
  font-size: 0.75rem;
  margin-top: 1.875rem;
  line-height: 1.5;
}

// 响应式设计
@media (max-width: 1024px) {
  .login-left {
    display: none;
  }

  .login-right {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .login-form-container {
    width: 18.75rem;
  }

  .login-title {
    font-size: 1.5rem;
  }
}
</style>
